<template>
  <div>
    <van-grid :border="true" :column-num="1">
      <van-grid-item>
        <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
      </van-grid-item>
    </van-grid>
    <van-tabs>
      <van-tab title="西瓜"></van-tab>
    </van-tabs>
    <van-grid :border="true" :column-num="3">
      <van-grid-item icon="photo-o" text="黑美人" to="/summerFruits/watermelonMain/thirdMenu" />
      <van-grid-item icon="photo-o" text="黑美人" />
      <van-grid-item icon="photo-o" text="黑美人" />
    </van-grid>
    <van-grid :border="true" :column-num="3">
      <van-grid-item icon="photo-o" text="黑美人" />
      <van-grid-item icon="photo-o" text="黑美人" />
      <van-grid-item icon="photo-o" text="黑美人" />
    </van-grid>
    <van-button type="primary" size="mini" to="/summerFruits/watermelonMain"
      >查看所有品种</van-button
    >
    <div id="backBtn" @click="back">返回</div>
  </div>
</template>

<script>
export default {
  methods: {
    back() {
      history.back();
    },
    linkTo() {
      this.$router.push({ path: "/category/summerFruits" });
    },
  },
};
</script>
    
<style>
.van-tab--active {
  color: #4fc08d;
  font-weight: 500;
}
.van-tabs__line {
  height: 2px;
  background-color: #4fc08d;
}
.van-button {
  text-align: center;
}
.van-button--mini {
  padding: 0px 20px;
  left: calc(50% - 51px);
}
#backBtn {
  width: 50px;
  position: absolute;
  right: 0;
  padding-right: 10px;
  text-decoration: underline;
}
</style>